<template>
    <div class="baobei">
        <div class="baobei-w">
            <div class="baobei-content" v-if="pl">
                <div class="bc-top clearfix">
                    <ul class="baobei-nav clearfix">
                        <li class="qbbb activ2"><a>全部宝贝<span>{{arr.length}}</span></a></li>
                        <li class="sx1"><a>失效<span>0</span></a></li>
                    </ul>
                    <div class="baobei-r clearfix">
                        <div class="plgl">批量管理</div>
                    <form class="bbss">
                        <input type="text" class="bbss-text">
                        <button class="bbss-img"></button>
                    </form>
                    </div>
                </div>
                <div class="bc-content">
                    <ul class="bc-content-nav clearfix">
                        <li class="bc-infor" v-for="(limit,kkk) in arr" :key="kkk">
                            <div class="bc-ftop" >
                                <div class="icon-shanchu ljt iconfont" @click="shanchu(limit.SID,kkk)"></div>
                                <a><img :src="'/img/'+imgwrap[kkk][0]" @click="tbb(limit.SID,limit.spid)"></a>
                            </div>
                            <div class="f-blok bc-ftop2">
                                <a class="f-jsp spys" href="javascript:;" @click="tdp(limit.spid)">进入商铺</a>
                                <a class="f-jsp spys2">找相似</a>
                            </div>
                            <div class="f-content clearfix" >
                                <img class="f-img" src="../assets/img/sc/sctm1.png">
                                <a @click="tbb(limit.SID,limit.spid)"><span v-for="(item,key) in mswrap[kkk]" :key="key">{{item}}</span></a>
                            </div>
                            <div class="f-foot">
                                <span class="f-foot-qq">￥</span>
                                <span class="f-foot-sz">{{limit.money}}</span>
                                <!-- <span></span> -->
                                <!-- <span>宝贝失效了</span> -->
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bbyc" v-else>您还没收藏过宝贝哦，快去逛逛吧!</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            pl:true,
            arr:"",
            num:"",
            img:"",
            imgwrap:[],
            ms:"",
            mswrap:[]
        }
    },
    methods:{
        tbb(sid,spid){
            console.log(sid,spid)
            this.$router.push(`/shangpu/${spid}?spin=${sid}`)
        },
        shanchu(val,key){
            console.log(val,key)
            // return false
            var _this=this
            axios.post("/api/shanchuscsp",{sid:val}).then((data)=>{
                if(data.data){
                    _this.arr.splice(key,1)
                    _this.imgwrap.splice(key,1)
                    _this.mswrap.splice(key,1)
                    if(_this.arr.length==0){
                        _this.pl=false
                    }
                }else{
                     _this.$toast({
                        message:"操作失败",
                        duration:1000
                    })
                }
            })
        },
        tdp(val){
            this.$router.push({name:"shangpu",params:{id:val}})
        }
    },
    created(){
        axios.get("/api/").then((data)=>{
            if(data.data){
               this.unames=data.data
            }else{
                this.unames=false
                this.$router.push("/login")
            }
        })
        var _this=this
        axios.post("/api/bbsc").then((data)=>{
            console.log(data.data)
            if(data.data){
                _this.arr=data.data
                _this.num=data.data.length
                for(var i=0;i<data.data.length;i++){
                    _this.img=_this.arr[i].img.split(',')
                    _this.ms=_this.arr[i].miaoshutag.split(',')
                    _this.imgwrap.push(_this.img)
                    _this.mswrap.push(_this.ms)
                    _this.img=""
                    _this.ms=""
                }
                console.log(_this.arr)
            }else{
                _this.pl=false
            }
        })
    }
}
</script>

<style scoped >
.bbyc{
    margin: 10px auto;
     width: 1190px;
    height: 250px;
    font-size: 16px;
    color: #B18466;
    text-align: center;
    line-height: 150px;
}
.bc-infor:hover .ljt{
    display: block;
}
.ljt{
    display: none;
    z-index: 888;
    cursor: pointer;
    right: 0;
    top: 0;
    position: absolute;
    color:#666;
    background: rgba(0,0,0,.3);
    font-size:24px;
    width: 30px;
    height: 30px;
}
.ljt:hover{
    background: #f40;
    color: #dcdcdc;
}
.baobei-wz{
    background-color: #f40;
}
.f-foot{
    font-size: 16px;
    color: #f40;
    margin: 10px auto;
    text-align: center;
    width:75px;
    height:16px;
}
.f-foot-qq{
    width: 7px;
    height: 14px;
}
.f-foot-sz{
    width: 47px;
    height: 14px;
}
.spys{
    left: 3px;
}
.spys2{
    right: 2px;
}
.f-blok:hover .f-jsp{
display: block;
}
.f-blok>.f-jsp{
    cursor: pointer;
    bottom:0;
    position: absolute;
    color: #fff;
    background: rgba(0,0,0,.6);
    max-width: 70px;
    line-height: 25px;
    height: 25px;
}
.f-jsp:hover{
    background: #FF4400;
}
.bc-ftop2:hover .f-blok{
    display: block;
}
.f-jsp{
    font-size: 14px;
    display: none;
}
.bc-ftop:hover .f-jsp{
    display: block;
}
.f-blok{
    cursor: pointer;
    top: 0;
    left: 0;
    position: absolute;
}
.bc-ftop>a>img{
    width:148px;
    height: 148px;
}
img.f-img{
    width: 24px;
    float: left;
    height: 18px;
}
.f-content{
    margin:0 0 10px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    height: 23px;
}
.f-content>a:hover{
    color: #f40;
}
.f-content>a{
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    margin-top:3px;
    color: #3c3c3c;
    margin-left: 5px;
    text-align:left;
    font-size: 14px;
    float: left;
    width: 110px;
    height: 23px;
}
.bc-ftop,.bc-ftop2{
    width: 148px;
    height: 148px;
}
.bc-ftop{
    position: relative;
}
.bc-ftop>a,.bc-ftop2>a{
    width: 148px;
    height: 148px;
}
.bc-infor{
    position: relative;
    margin:10px 0 0 10px;
    border: 1px solid #dcdcdc;
    width:150px;
    float: left;
    text-align: center;
}
.bc-content{
    width: 1230px;
    margin-bottom: 10px;
}
.bc-content-nav{
    padding-left: 25px;
    width:100%;
}

.bbss-img{
    background: url('../assets/img/sc/fdj.png') no-repeat;
    position: absolute;
    right: -1px;
    border: transparent 1px solid;
    bottom:-3px;
    width: 29px;
    height: 29px;
}

.bbss-text{
    width: 150px;
    height: 26px;
    border:#dcdcdc 1px solid;
}
.bbss{
    margin:10px 0 10px 10px;
    position: relative;
    float: right;
    width: 150px;
    height: 26px;
}
.plgl:hover{
    color: #FF4400;
    border: #f40 1px solid;
}
.plgl{
    cursor: pointer;
    text-align: center;
    line-height: 29px;
    font-size: 14px;
    float: left;
    margin:10px;
    width: 70px;
    height: 30px;
    color: #666;
    border:#dcdcdc 1px solid;
}
.baobei-r{
    height: 48px;
    float: right;
}
.qbbb>a,.sx1>a{
    color: #333;
    font-size: 14px;
}
.qbbb:hover>a,.sx1:hover>a{
    color:#FF4400;
}
.sx1{
    cursor: pointer;
    float: left;
    line-height: 48px;
    text-align: center;
    width: 100px;
    height: 48px;
}
.activ2>a{
    color:#FF4400;
}
.activ2{
    
    border-bottom: #FF4400 2px solid;
}
.qbbb{
    cursor: pointer;
    float: left;
    line-height: 48px;
    text-align: center;
    width: 132px;
    height: 48px;
}
.baobei-nav{
    padding: 0;
    margin: 0;
    width: 390px;
    height: 48px;
    float: left;
}
.baobei-w{
    width:100%;
}
.baobei-content{
    margin: 10px auto;
    width: 1230px;
}
.bc-top{
    width: 100%;
    height: 48px;
    border-bottom: 2px solid #ddd;
}
</style>
